<template>
  <view class="article-content">
    <u--form
      labelPosition="left"
      :model="model"
      :rules="rules"
      :labelWidth="80"
      labelAlign="right"
      ref="formRefs"
    >
      <u-form-item prop="info.articleAttaUrl" borderBottom ref="item1">
        <sy-audio
          isCountDown
          ref="audio"
          :src="url"
          audioCover=""
          subheading=""
          :showTitle="false"
        ></sy-audio>
      </u-form-item>
      <u-form-item prop="info.articleTitle" label="文章标题" required borderBottom ref="item1">
        <u--input
          v-model="model.info.articleTitle"
          inputAlign="right"
          placeholder="必填"
          border="none"
        ></u--input>
      </u-form-item>
      <u-form-item
        prop="info.articleContent"
        label="文章内容"
        labelPosition="top"
        required
        borderBottom
        ref="item1"
      >
        <view style="padding-top: 20rpx; width: 100%">
          <u--textarea
            :height="100"
            v-model="model.info.articleContent"
            placeholder="请输入朗读感言（选填）"
            style="background-color: #f3f3f3"
          ></u--textarea>
        </view>
      </u-form-item>
    </u--form>
    <view class="confirm-btn">
      <u-button color="#fc7110" text="发布" @click="submit"></u-button>
    </view>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>
<script>
// https://article-prod.oss-cn-chengdu.aliyuncs.com/XLhOna8ZMFAF3f0c66ef2d30d400b0cc7c0d38debc96.durationTime=11853.aac
import { articleUp } from '@/api/yuedu'
export default {
  data() {
    return {
      dataList: [],
      showOldPassword: false,
      showPassword: false,
      model: {
        info: {}
      },
      url: '',
      rules: {
        'info.articleTitle': {
          type: 'string',
          required: true,
          message: '请输入文章标题',
          trigger: ['blur', 'change']
        },
        // 'info.author': {
        //   type: 'string',
        //   required: true,
        //   message: '请输入文章作者',
        //   trigger: ['blur', 'change']
        // },
        'info.articleContent': {
          type: 'string',
          required: true,
          message: '请输入文章内容',
          trigger: ['blur', 'change']
        }
      }
    }
  },
  onLoad(option) {
    this.url = decodeURIComponent(option.url) // decodeURIComponent(option.url)
  },
  methods: {
    submit() {
      this.$refs.formRefs.validate().then((res) => {
        const { info } = this.model
        const resetParams = {
          ...info,
          userId: this.$store.getters.userInfo.userId,
          articleAttaUrl: this.url,
          articleType: '2'
        }
        uni.showLoading()
        articleUp(resetParams)
          .then((res) => {
            uni.hideLoading()
            this.$refs.uToast.show({
              type: 'default',
              message: res.msg || '操作成功',
              duration: 3000,
              complete() {
                if (res.code === 200) {
                  uni.navigateBack({
                    delta: 2
                  })
                  uni.$emit('getRedCard', res.data)
                }
              }
            })
          })
          .catch(() => {
            uni.hideLoading()
          })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.article-content {
  min-height: 100vh;
  padding: 20rpx;
  background-color: #ffffff;
  .confirm-btn {
    padding: 20rpx;
  }
}
.uni-input {
  border: 0;
  width: 100%;
}
/deep/ .u-form-item__body {
  padding-right: 20rpx;
  padding-left: 20rpx;
}
</style>
